<template>
  <div>
    <el-select v-model="value" placeholder="全部类型" style="margin-top: -5px;">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-time-picker is-range style="width: 250px;margin-left: 25px;" v-model="value1" range-separator="至"
      start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
    </el-time-picker>
    <el-input placeholder="请输入搜索内容" v-model="input3" class="input-with-select"
      style="width: 330px;margin-top: -5px; margin-left: 20px;">
      <template #prepend>
        <el-select v-model="select" placeholder="领取用户" style="width: 100px;">
          <!-- <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option> -->
        </el-select>
      </template>
    </el-input>
    <el-button
      style="background: #7AA4FF;border-radius: 6px;margin-top: -5px;color: white;margin-left: 170px;">查询</el-button>
    <el-button style="border-radius: 6px;margin-top: -5px;">重置</el-button>
  </div>
  <el-table ref="singleTableRef" :data="dataform" highlight-current-row style="width: 93%;margin-top: 20px;"
     :header-cell-style="{ background: '#C9DAFF' }">
    <el-table-column type="selection" width="80" />
    <el-table-column label="用户信息">
      <template #default="slotScope">
        <img src="../../../public/avatar.jpg" width="50" style="float: left;">
        <div style="display: flex;flex-direction: column;float: left;line-height: 16px;margin-left: 5px;text-align: center;">
        <span>天时地利</span>
        <span>张三</span>
        <span>13312341234</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="yid" label="优惠券编码" />
    <el-table-column prop="time" label="领取时间" />
    <el-table-column prop="czsj" label="操作时间" />
    <el-table-column prop="ztt" label="状态" />
  </el-table>
  <el-pagination background layout="prev, pager, next, jumper,sizes" :page-sizes="[5, 10, 20, 30]"
    @update:page-size='pagesize = $event' :page-size="pagesize" :current-page="page" @update:current-page="page = $event"
    :total="total" class="mt-4">
  </el-pagination>
  <div class="pageleft">
    共{{ total }}条记录 第{{ page }}/{{ Math.ceil(total / pagesize) }}页
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '未使用'
      }, {
        value: '选项2',
        label: '已使用'
      }, {
        value: '选项3',
        label: '已过期'
      }, {
        value: '选项4',
        label: '已作废'
      }],
      value: '',
      value1: [null, null],
      input3: '',
      dataform: [
        { name: '张三', yid: '2012002002002', time: '2023/04/10 11:56:02', czsj: '', ztt: '未使用' },
        { name: '张三', yid: '2012002002002', time: '2023/04/10 11:56:02', czsj: '', ztt: '未使用' },
        { name: '张三', yid: '2012002002002', time: '2023/04/10 11:56:02', czsj: '', ztt: '未使用' }, { name: '张三', yid: '2012002002002', time: '2023/04/10 11:56:02', czsj: '', ztt: '未使用' }, { name: '张三', yid: '2012002002002', time: '2023/04/10 11:56:02', czsj: '', ztt: '未使用' }],
      page: 1,
      pagesize: 5,
      total: 50,
      select:''
    }
  }
}
</script>

<style lang="scss" scoped>
.pageleft {
  margin-top: 15px;
  font-size: 14px;
  float: left;
}
.mt-4 {
  margin-top: 10px;
  float: right;
  margin-right: 7%;
}
</style>